<template>
  <el-dialog v-model="props.paramaterViewVisible" title="参数预览" width="1000" destroy-on-close :before-close="handleVisible">
    <div class="parameterView">
      <div class="left">
        <el-tree :data="parameterTree" default-expand-all>
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <el-icon class="icon-class" v-if="data?.children?.length > 0"><Folder /></el-icon>
              <el-icon class="icon-class" v-else><Document /></el-icon>
              <span class="node-title">{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </div>
      <div class="right">
        <div class="query_div">
          <div class="btn_class">
            <el-button type="primary" size="small">查询</el-button>
            <el-button size="small">重置</el-button>
          </div>
          <el-form inline size="small" class="form_class">
            <el-form-item label="path">
              <el-input />
            </el-form-item>
            <el-form-item label="type">
              <el-select>
                <el-option label="page" value="page"></el-option>
                <el-option label="parameter_field" value="parameter_field"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="component">
              <el-input />
            </el-form-item>
            <el-form-item label="label">
              <el-input />
            </el-form-item>
            <el-form-item label="field_id">
              <el-input />
            </el-form-item>
            <el-form-item label="field_type">
              <el-select>
                <el-option label="input" value="input"></el-option>
                <el-option label="select" value="select"></el-option>
                <el-option label="radio-group" value="radio-group"></el-option>
                <el-option label="table" value="table"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="field_id">
              <el-select>
                <el-option label="input" value="number"></el-option>
                <el-option label="select" value="text"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="table_div">
          <el-table :data="tableData" border="true">
            <el-table-column v-for="item in columns" :key="item.label" :label="item.label" align="center" :prop="item.prop" />
          </el-table>
          <div class="pagenation">
            <el-pagination
              size="small"
              layout="prev, pager, next,jumper"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              :total="total"
            />
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitAdd"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
    
<script name="ParameterView" setup>
import { Folder } from '@element-plus/icons-vue';
import { getPrameterList } from '@/api/algorithmLibrary';

const props = defineProps(['paramaterViewVisible', 'rowData']);
const emit = defineEmits(['close']);
const parameterTree = ref([
  { label: '11', value: '11', children: [{ label: '22', value: '22' }] },
  { label: '33', value: '33' }
]);
const tableData = ref([]);
const columns = [
  { label: 'path', prop: 'path' },
  { label: 'type', prop: 'type' },
  { label: 'sort_order', prop: 'sort_order' },
  { label: 'component', prop: 'component' },
  { label: 'label', prop: 'label' },
  { label: 'field_id', prop: 'field_id' },
  { label: 'field_type', prop: 'field_type' },
  { label: '自定义配置', prop: 'field_type' }
];
const queryParams = {
  pageNum: 1,
  pageSize: 10
};
const total = ref(0);

// 通知父组件
const handleVisible = (modalType) => {
  emit('close', { type: 'parameterView', data: { type: modalType === 'refesh' ? 'refesh' : '' } });
};
// 提交数据
const submitAdd = () => {};
// 查询数据
const getList = () => {
  getPrameterList().then(res=>{
    const list  = res?.list;
    listToTree(list);
  })
};
const listToTree = (list)=>{
  let dict={};
  if(list.length!==0){
    // 节点排序
    sortListByPath(list);
  }
}
</script>
<style scoped lang="scss">
.parameterView {
  display: flex;
  .left {
    width: 200px;
    overflow: auto;
    .custom-tree-node {
      display: flex;
      .icon-class {
        color: rgba(193, 190, 190);
        font-size: 120%;
      }
      .node-title {
        padding-left: 5px;
      }
    }
  }
  .right {
    width: calc(100% - 200px);
    padding-left: 20px;
    .form_class {
      border: 1px solid #dddddd7a;
      padding: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .table_div {
      .pagenation {
        display: flex;
        justify-content: end;
        margin-top: 10px;
      }
    }
  }
}

:deep(.el-cascader) {
  width: 100%;
}
</style>